<template>
  <div class="statistics-content statistics-1">
    <div class="left">
      <div class="top">
        <div class="grid-left">
          <div class="statistics-block">
            <BlockItem class="max" title="劳动力年龄分布" ></BlockItem>
            <div class="chart" id="chart1"></div>
          </div>
          <div class="statistics-block">
            <BlockItem class="max" title="劳动力学历分布"></BlockItem>
            <div class="chart" id="chart2"></div>
          </div>
        </div>
        <div class="grid-center">
          <div class="map-block" style="position: relative">
            <div class="number-block" style="position: relative;z-index: 1" >
                <NumberItem class="number-item" v-for="item in numberData" @click.native="oncloseDialog(item.id,item.name)"
                            :key="item.id"
                            :name="item.name"
                            :number="item.number"
                            :color="item.color"
                            :icon="item.icon"
                ></NumberItem>
            </div>
            <Cover v-if="closeDialog1" :id="fatherId" :closeDialog1="close" :type="type" :name="name"></Cover>
<!--            <div style="position: absolute;right:0px;bottom: -15px;color: #fff;font-size: 14px">就业数</div>-->
            <div>
              <div style="display: flex;justify-content: space-between;">
                <BlockItem class="max" style="margin-top: 20px;width: 400px;"
                           title="城乡富余劳动力劳务输转就业图"></BlockItem>
                <div class="tab-block2">
                  <div :class="mapType===1?'active':''" @click="chartBind(1)" class="tab">瓜转外(省内)</div>
                  <div :class="mapType===3?'active':''" @click="chartBind(3)" class="tab">瓜转外(省外)</div>
                  <!--                             <div :class="mapType===2?'active':''" @click="chartBind(2)" class="tab">外转定</div>-->
                  <div :class="mapType===4?'active':''" class="tab" @click="chartBind(4)">外转瓜</div>
                </div>
              </div>
              <Map :provinces="a" end="金塔" v-if="mapType===1"></Map>
              <Map2 :provinces="a" end="金塔" v-if="mapType===2"></Map2>
              <Map3 :provinces="a" end="金塔" v-if="mapType===3"></Map3>
              <Map4 :provinces="a" end="金塔" v-if="mapType===4"></Map4>
            </div>
          </div>
        </div>
      </div>
      <div class="grid-bottom">
        <div class="statistics-block">
          <BlockItem class="max" title="未就业人员意向就业岗位(TOP20)"></BlockItem>
          <div class="chart" id="chart3"></div>
        </div>
      </div>
    </div>
    <div class="grid grid-right">
      <div class="statistics-block">
        <BlockItem class="max" title="未就业人数分布"></BlockItem>
        <div class="chart" id="chart4"></div>
      </div>
      <div class="statistics-block">
        <BlockItem class="max" title="大就业信息系统登记未就业人员情况"></BlockItem>
        <div class="chart1" id="chart5"></div>
      </div>
    </div>
    <Modal v-if="showMore" @closeModal="showMore=false" :title="title" :name="this.name" width="1200px" height="400px">
      <MapCount3 :title="title" :type="type"></MapCount3>
    </Modal>
    <Modal v-if="showMoreB" @closeModal="showMoreB=false" :title="title" width="1200px" height="600px">
      <MapCount4  :type="type"></MapCount4>
    </Modal>
  </div>
</template>

<script>
import NumberItem from "@/components/NumbeItem/NumberItem.vue";
import Modal from "@/components/Modal/Modal.vue";
import BlockItem from "@/components/BlockItem/BlockItem.vue";
import Map from '@/components/Statistics1/Map'
import Map2 from '@/components/Statistics1/Map2'
import Map3 from '@/components/Statistics1/Map3'
import Map4 from '@/components/Statistics1/Map4'
import Cover from "@/components/Cover/Cover.vue";
import {
  getEmploymentMap,
  getIndustrialApi,
  ruralAndCityCountApi,
  UnemployedApi
} from "@/api/statistics-1";
import MapCount3 from "@/components/MapCount/MapCount3";
import MapCount4 from "@/components/MapCount/MapCount4";

export default {
  name: "Statistics1",
  components: {MapCount3,MapCount4, NumberItem,Modal,BlockItem,Map,Map2,Map3,Map4,Cover},
  data(){
    return{
      mapType: 1,
      a: [
        { 'name': '敦煌', 'value': 1 },
        { 'name': '兰州', 'value': 3004 },
        { 'name': '嘉峪关', 'value': 5553 },
        { 'name': '金昌', 'value': 529 },
        { 'name': '白银', 'value': 27 },
        { 'name': '天水', 'value': 646 },
        { 'name': '武威', 'value': 859 },
        { 'name': '张掖', 'value': 154 },
        { 'name': '定西', 'value': 345 },
        { 'name': '陇南', 'value': 211 },
        { 'name': '平凉', 'value': 236 },
        { 'name': '庆阳', 'value': 127 },
        { 'name': '临夏回族自治州', 'value': 341 },
        { 'name': '甘南州', 'value': 154 }
      ],
      closeDialog1: false,
      closeDialog: false,
      fairActive:1,
      fatherId: 0,
      moreType:1,
      title:'',
      numberData:[
        {id:1,color:['#5c6aff','#4a29d8'],name:'农村劳动力(人)）',icon:'icon-caishouzhongliang',number:265},
        {id:2,color:['#12f1b8','#0db5e6'],name:'城镇劳动力',icon:'icon-caishouzhongliang',number:883},
        {id:3,color:['#30cbf7','#1997e1'],name:'劳动力总数',icon:'icon-caishouzhongliang',number:1148},

        // {id:4,color:['#f7c759','#fb838f'],name:'城镇就业率（%）',icon:'icon-huoche',number:'0'},
      ],
      detail:{},
      showMore:false,
      showMoreB:false,
      count: 2,
      page: 1,
      limit: 6,
      type:1,
    }
  },
  methods: {
    close() {
      this.closeDialog1 = false
    },
    oncloseDialog(e,name)
    {
      this.closeDialog1 = true
      this.name = name
      this.fatherId = e
      this.type = e
    },
    handleSizeChange(e) {
      this.limit = e
      this.getList()
    },
    handleCurrentChange(e) {
      this.page = e
      sessionStorage.setItem('currentPage',this.page)
      this.getList()
    },
    openCover(){
      this.closeDialog = true
    },
    getMapDetail(){
      getEmploymentMap({type:this.type}).then((res)=>{
        if(res.code===200){
          this.detail=res.data

        }
      })
    },
    //农村劳动力，城镇劳动力，劳动力总数
    ruralAndCityCount(){
      ruralAndCityCountApi({type:this.type}).then((res)=>{
        if(res.code===200){
          this.numberData[0].number = res.data.ruralLaborersCount
          this.numberData[1].number = res.data.cityCount
          this.numberData[2].number = res.data.allCount
        }
      })
    },
    getCount(){
      // getAndcityCount().then((res)=>{
      //   if(res.code===200){
      //     // this.numberData[0].number=res.data.ruralLaborersCount
      //     // this.numberData[1].number=res.data.workWillingCount
      //     // this.numberData[2].number=res.data.cityNoWorkCount
      //
      //   }
      // })
    },
    chartBind(e){
      this.mapType=e

    },
    initChart1(){
      let myCharts = this.$echarts.init(document.getElementById('chart1'));
      myCharts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option = {
        tooltip: {
          trigger: 'item'
        },
        color: ['#5AD8A6','#FFC328','#FF745A','#2fc9f6','#F4F783' ],
        title: {
          //text: '⼈才学历分布',
          top:0,
          left:'left',
          textStyle: {
            color: '#23ffff',
            fontSize: 17,
          }
        },
        legend: {
          orient: 'vertical',
          right: 30,
          top: 40,
          itemWidth: 10,
          itemHeight: 10,
          itemGap:30,
          textStyle: {
            color: "#fff"
          },
        },

        series: [
          {
            type: 'pie',
            radius: '75%',
            center: ['25%', '40%'],
            selectedMode: 'single',
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                // fontSize: 20,
                // fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 27, name: '18岁以下'},
              {value: 67, name: '18-30岁'},
              {value: 50, name: '30-40岁'},
              {value: 34, name: '40-50岁'},
              {value: 18, name: '50-60岁'},
            ]
          }
        ]
      };
      myCharts.on('click',(e)=>{
          this.showMoreB=true;
          this.title=e.data.name
          this.type=e.data.type

      })
      // getKeynoteCount().then((res)=>{
      //   if(res.code===200){
      //     const data=res.data
      //     data[0]['type'] = 1
      //     data[1]['type'] = 2
      //     data[2]['type'] = 3
      //     option.series[0].data=data;
      //
      //   }
      // })
      myCharts.hideLoading()
      myCharts.setOption(option);
    },
    initChart2(){
      let charts = this.$echarts.init(document.getElementById('chart2'));
      charts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option = {
        color:['#5AD8A6','#FFC328','#FF745A','#2fc9f6','#F4F783' ],
        title: {
          left:'center',
          top:10,
          textStyle: {
            color: '#46a9ff',
            fontSize: 17,
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 50,
          itemWidth: 10,
          itemHeight: 10,
          itemGap:30,
          textStyle: {
            color: "#fff"
          },
        },
        series: [
          {
            type: 'pie',
            radius: '75%',
            center: ['25%', '40%'],
            selectedMode: 'single',
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                // fontSize: 20,
                // fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 2, name: '小学'},
              {value: 5, name: '初中'},
              {value: 17, name: '高中(中职)'},
              {value: 33, name: '大专'},
              {value: 142, name: '大学本科及以上'},
            ]
          }
        ]
      }
      charts.hideLoading();
      // educationPie().then((res)=>{
      //   console.log(res)
      //   if(res.code===200){
      //     option.series[0].data=res.data;
          charts.setOption(option)
        // }
      // })


    },
    initChart3(){
      let myCharts = this.$echarts.init(document.getElementById('chart3'));
      let data = ['农、林、牧、渔业', '采矿业', '制造业', '电力、热力、燃气及水生产和供应业', '建筑业', '交通运输、仓储和邮政业', '信息传输、软件和信息技术服务业', '批发和零售业', '住宿和餐饮业', '金融业', '房地产业', '租赁和商务服务业', '科学研究和技术服务业', '水利、环境和公共设施管理业', '居民服务、修理和其他服务业', '教育', '卫生和社会工作', '文化、体育和娱乐业', '公共管理、社会保障和社会组织', '国际组织'];
      myCharts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top:'18%',
          left: '5%',
          right: '0',
          bottom: '35%',
        },
        color: ['#ff824a', '#fcc727'],
        legend: {
          top:0,
          right:0,
          show: true,
          itemWidth: 30,
          itemHeight: 15,
          textStyle: {
            color: "#fff"
          },
          data: ['男', '女'],
        },
        xAxis: {
          data: data,
          axisLabel: {
            interval:0,
            rotate:60,
            textStyle: {
              color: '#fff',
              fontSize: '11',
            },
            formatter: function (value) {
              var ret = '';
              var maxLength = 5;
              var valLength = value.length;
              var rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (var i = 0; i < rowN; i++) {
                  var temp = '';
                  var start = i * maxLength;
                  var end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },
        yAxis: {
          name: '单位：人',
          nameTextStyle:{
            color:'#fff',
            fontSize:12
          },
          splitLine: {//分割线配置
            show:true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
            }
          }
        },
        dataZoom: [
          {
            type: "slider", //slider表示有滑动块的，inside表示内置的
            show: false,
            xAxisIndex: 0,
            startValue: 0,
            endValue: 6,
          },
        ],
        series: [{
          name:'人数',
          // data: getNum(20,4000,2000),
          // data: getNum(20,4000,2000),
          data:[74,57,54,45,44,36,27,25,25,24,22,22,22,20,20,20,20,20,17,17,16],
          type: 'bar',
          barWidth:13,
          itemStyle: {
            normal: {
              label:{
                show:true,
                position:'top',
                textStyle:{
                  color:'#fff',
                  fontSize:14
                },
              },
              barBorderRadius:[15, 15, 15, 15],
              color:new this.$echarts.graphic.LinearGradient(1,0,0,0,[{
                offset:0,
                color:'#09ace5'
              },{
                offset:1,
                color:'#3fe3a9'
              }])
            }
          }
        }
        ]
      };
      // getIndustrialApi().then((res)=>{
      //   if(res.code===200){
      //     const data=res.data
      //     option.xAxis.data=data.dataY;
      //     option.series[0].data=data.dataX;
      //     myCharts.hideLoading();
      //     myCharts.setOption(option);
      // setInterval(() => {
      //   if (option.dataZoom[0].endValue == data.length - 1) {
      //     option.dataZoom[0].endValue = 5
      //     option.dataZoom[0].startValue = 0
      //   } else {
      //     option.dataZoom[0].endValue =
      //         option.dataZoom[0].endValue + 1
      //     option.dataZoom[0].startValue =
      //         option.dataZoom[0].startValue + 1
      //   }
      //
      // }, 3000);
      //   }
      // })
      myCharts.hideLoading();
      myCharts.setOption(option)
    },
    initChart4(){
      let charts = this.$echarts.init(document.getElementById('chart4'));
      let data = ['柳湖镇', '西湖乡', '渊泉镇', '布隆吉乡', '河东乡', '瓜州乡', '广至藏族乡', '双塔乡', '沙河回族乡', '七墩回族乡东乡族乡', '腰站子东乡族乡','三道沟乡','锁阳城镇','南岔镇','国营小宛农场','梁湖乡'];
      charts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option = {
        xAxis: {
          type: 'value',
          splitLine: {//分割线配置
            show:true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          },
          axisLabel:{
            textStyle:{
              show:true,
              color: '#fff'
            }
          },
        },
        tooltip:{
          trigger:'axis',
          axisPointer:{
            type:'none'
          }
        },
        grid:{
          top:10,
          left:60,
          right:30,
          bottom:60
        },
        color: ['#40E1A8','#FAC858'],
        legend: {
          top:0,
          right:0,
          show: true,
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "#fff"
          },
          data: ['有就业意向', '无就业意向'],
        },
        yAxis: {
          type: 'category',
          data: data,
          axisLabel:{
            textStyle:{
              show:true,
              color: '#fff',
              fontSize:14
            }
          },
          axisTick:{
            show:false
          }
        },
        dataZoom: [
          {
            type: "slider", //slider表示有滑动块的，inside表示内置的
            show: false,
            yAxisIndex: 0,
            startValue: 0,
            endValue: 6,
          },
        ],
        series: [
          {
            name: '有就业意向',
            type: 'bar',
            stack: '人数',
            barWidth:20,
            data: [51, 52, 18, 53, 57, 26, 22, 31, 19, 30, 51, 52, 18, 53, 57, 26, 22, 31, 19, 30, 22, 45],
          },
          {
            name: '无就业意向',
            type: 'bar',
            stack: '人数',
            barWidth:20,
            data: [32, 22, 17, 16, 18, 26, 34, 19, 13, 44, 51, 52, 18, 53, 57, 26, 22, 31, 19, 30, 22, 45],
          },
        ]
      }
      charts.on('click',(e)=>{
        if(e.componentSubType==='bar'){
          // this.moreType=1;
          // this.showMore=true;
        }
      })
      option.yAxis.data.reverse();
      UnemployedApi().then((res)=>{
        if(res.code===200){
          const data=res.data
          option.series[0].data=data.arr.reverse();
          option.series[1].data=data.arr2.reverse();
          charts.hideLoading();
          charts.setOption(option)

      setInterval(() => {
        if (option.dataZoom[0].endValue == data.length - 1) {
          option.dataZoom[0].endValue = 5
          option.dataZoom[0].startValue = 0
        } else {
          option.dataZoom[0].endValue =
              option.dataZoom[0].endValue + 1
          option.dataZoom[0].startValue =
              option.dataZoom[0].startValue + 1
        }
        charts.setOption(option)
      }, 3000);

        }
      })
    },
    initChart5(){
      let charts = this.$echarts.init(document.getElementById('chart5'));
      let data = ['柳湖镇', '西湖乡', '渊泉镇', '布隆吉乡', '河东乡', '瓜州乡', '广至藏族乡', '双塔乡', '沙河回族乡', '七墩回族乡东乡族乡', '腰站子东乡族乡','三道沟乡','锁阳城镇','南岔镇','国营小宛农场','梁湖乡'];
      charts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option = {
        xAxis: {
          type: 'category',
          data: data,
          // data: ['肃州区','金塔','敦煌','瓜州','玉门','肃北','阿克塞'],
          axisTick:{
            show:false
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: '11'
            },
            interval: 0,
            formatter: function (value) {
              var ret = '';
              var maxLength = 3;
              var valLength = value.length;
              var rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (var i = 0; i < rowN; i++) {
                  var temp = '';
                  var start = i * maxLength;
                  var end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },
        tooltip:{
          trigger:'axis',
          axisPointer:{
            type:'none'
          }
        },
        grid:{
          top:50,
          left:60,
          right:10,
          bottom:30
        },
        color: ['#FAC858','#40E1A8'],
        legend: {
          top:0,
          right:0,
          show: true,
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "#fff"
          },
          data: ['人数'],
        },
        yAxis: {
          type: 'value',
          name: '单位：人',
         // minInterval:200,
          min:0,
          nameTextStyle:{
            color:'#fff',
            fontSize:14
          },
          splitLine: {//分割线配置
            show:true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
            }
          }
        },
        dataZoom: [
          {
            type: "slider", //slider表示有滑动块的，inside表示内置的
            show: false,
            xAxisIndex: 0,
            startValue: 0,
            endValue: 6,
          },
        ],
        series: [
          {
            name: '人数',
            type: 'bar',
            stack: '人数',
            barWidth:20,
            data: [51, 52, 18, 53, 57, 26, 22, 31, 19, 30, 51, 52, 18, 53, 57, 26, 22, 31, 19, 30, 22, 45],
          },

        ]
      };
      // getHelpSituationApi().then((res)=>{
      //   if(res.code===200){
      //     const data=res.data
      //     option.series[0].data = []
      //     option.series[1].data = []
      //    // option.series[2].data = []
      //     for (let i = 0; i < data.length; i++) {
      //      // option.series[0].data.push(data[i].notWorkCount);
      //       option.series[0].data.push(data[i].notWorkCount);
      //       option.series[1].data.push(data[i].alreadyWorkCount);
      //     }
      //     charts.hideLoading();
      //     charts.setOption(option)
      //   }
      // })
      charts.hideLoading();
      charts.setOption(option)

      setInterval(() => {
        if (option.dataZoom[0].endValue == data.length - 1) {
          option.dataZoom[0].endValue = 5
          option.dataZoom[0].startValue = 0
        } else {
          option.dataZoom[0].endValue =
              option.dataZoom[0].endValue + 1
          option.dataZoom[0].startValue =
              option.dataZoom[0].startValue + 1
        }
        charts.setOption(option)
      }, 3000);

    }
  },
  mounted() {
    this.utils.createParams(this,this.$route.query);
    // this.getCount()
    // this.getMapDetail()
    //农村劳动力，城镇劳动力，劳动力总数
    this.ruralAndCityCount()
    this.initChart1()
    this.initChart2()
    this.initChart3()
    this.initChart4()
    this.initChart5()
  }
}
</script>

<style lang="scss" scoped>
$boxshadow: inset 0px 0px 20px 0px rgba(70, 169, 255, 0.75);
$border: 2px solid #05548A;
.statistics-content {
  width: calc(100% - 40px);
  margin: 0 auto;
  margin-top: 20px;
  height: calc(100% - 140px);
  //padding: 0 30px;
  .cover{
    position: relative;
    width: 52%;
    height: 70%;
    background-color: #0A1456;
    border-radius: 15px;
    padding: 20px;
    .cover-tab{
      display: flex;
      width: 50%;
      border: 1px solid #31A7FF;
      margin: 0 auto;
      .amount{
        width: 30%;
        color: #fff;
        border-right: 1px solid #31A7FF;
        text-align: center;
        height: 30px;
        line-height: 30px;
      }
      .amount.active{
        background-color: #02A9EC;
      }
      .already{
        width: 37%;
        color: #fff;
        border-right: 1px solid #31A7FF;
        text-align: center;
        height: 30px;
        line-height: 30px;
      }
      .already.active{
        background-color: #02A9EC;
      }
      .without{
        width: 37%;
        color: #fff;
        text-align: center;
        height: 30px;
        line-height: 30px;
      }
      .without.active{
        background-color: #02A9EC;
      }
    }
    .cover-top{
      display: flex;
      justify-content: space-between;
      .top-left{
        display: flex;
        .sign{
          background-color: #498CF3;
          width: 10px;
          height: 20px;
          border-radius: 15px;
          margin-right: 15px;
        }
        .title{
          color: #ffffff;
        }
      }
      .top-right{
        color: #2FA1F9;
        font-size: 20px;
        cursor: pointer;
        margin-right: 5px;
      }
    }
    .cover-middle{
      display: flex;
      margin: 30px 0 30px 82px;
      //justify-content: center;
      color: #fff;
      .begin{
        width: 120px;
        border: 1px solid #31A6FE;
        color: #fff;
        text-align: center;
        border-radius: 3px;
        margin-right: 15px;
      }
      .over{
        width: 120px;
        border: 1px solid #31A6FE;
        color: #fff;
        text-align: center;
        border-radius: 3px;
        margin: 0 15px;
      }
    }
    .cover-bottom{
      display: flex;
      flex-wrap: wrap;
      width: 83%;
      height: 60%;
      margin: 0 auto;
      border-radius: 5px;
      .region-item{
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc((100% - 30px)/3);
        height: 30%;
        background-color: #164088;
        border-radius: 5px;
        color: #fff;
        margin-right: 10px;
        border: 1px solid #31A7FF;
        .name{
          color: #fff;

        }
        .count{
          color: #50FFC1;
          font-size: 30px;
          margin: 0 5px 10px 5px;
        }
      }
    }
  }
  .chart {
    width: 100%;
    height: 100%;
  }

  .corner {
    position: absolute;
    width: 15px;
    height: 15px;
  }

  .corner.upper-left {
    background: url("/static/upper-left.png") no-repeat center;
    background-size: 100%;
    left: -2px;
    top: -2px;
  }

  .corner.upper-right {
    background: url("/static/upper-right.png") no-repeat center;
    background-size: 100%;
    top: -2px;
    right: -2px;
  }

  .corner.low-right {
    background: url("/static/low-right.png") no-repeat center;
    background-size: 100%;
    bottom: -2px;
    right: -2px;
  }

  .corner.left-lower {
    background: url("/static/left-lower.png") no-repeat center;
    background-size: 100%;
    bottom: -2px;
    left: -2px;
  }

  .statistics-block {
    padding: 10px;
    position: relative;
    border: $border;
    //box-shadow: $boxshadow;
    border-radius: 10px;
    background: #0A1456;
  }
}
.statistics-content {
  display: flex;
  flex-direction: row;
  .left{
    display: flex;
    flex-direction: column;
    width: calc((100% - 20px)/4*3);
    height: 100%;
    margin-right: 20px;
    .top{
      display: flex;
      flex-direction: row;
      width: 100%;
      height: calc(100%/3*2);
      .grid-left {
        width: calc(100%/3);
        .statistics-block{
          width: 100%;
          height: calc(50%- 10px);
        }
      }
      .grid-center{
        width: calc(100%/3*2);
        padding:0 20px;
        height: 100%;
        .statistics-block{
          width: 100%;
          height: calc(100%/3 - 20px);
          margin-top: 20px;
        }
      }
    }
    .grid-bottom{
      width: 100%;
      height: calc(100%/3);
      margin-top: 20px;
      .statistics-block{
        height: 100%;
        .chart{
          height: calc(100% - 40px);
        }
      }
    }
  }
  .grid {
    height: 100%;
  }
  .grid.grid-right {
    width: calc(100%/4);
    .chart1{
      height: calc(100% - 30px);
    }
  }
  .statistics-block{
    width: 100%;
    height: calc(50% - 10px);
    margin-bottom: 20px;
    .chart{
      width: 100%;
      height: 100%;
    }
  }
  .statistics-block:last-child{
    margin-bottom: 0;
  }
  .map-block{
    width: 100%;
    height: calc(100%/6*5);
    position: relative;

    #map{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 60px;
      left: 0;
      bottom: 0;
      right: 0;
    }
    .tab-block2{
      display: flex;
      align-items: center;
      position: relative;
      z-index: 998;
      .tab{
        color: #ffffff;
        font-size: 14px;
        background: #123178;
        cursor: pointer;
        padding: 5px 6px;
        border-radius: 4px;
      }
      .tab.active{
        background-image: linear-gradient(to right, #2295FF , #02CEF6);
      }
    }
    .number-block{
      width: 100%;
      display: flex;
      flex-direction: row;
      height: 50px;
      .number-item{
        width: calc((100% - 60px)/3);
        margin-right: 30px;
      }
      .number-item:last-child{
        margin-right: 0;
      }
    }
  }
}
</style>
